<template>
	<div class="pay-succeed-main">
		<!--支付成功-->
		<div class="payfor_succeed fix">
			<div class="succeed_describe">
				<p class="succeed_p">支付成功</p>
				<span class="succeed_span">我们会尽快为您发货！</span>
			</div>
			<img class="succeed_img" src="../assets/image/ico_succeed@2x.png">
		</div>
		<!--地址-->
		<div class="delivery_address fix">
			<div class="has_address">
				<img class="address_icon fl" src="../assets/image/ico_location@2x.png">
				<div class="default_address fl">
					<p>收货人：全凯</p>
					<p>收货地址：广东省 深圳市 南山区 粤海街道科兴科学园 A4栋 401</p>
				</div>
				<div class="default_phone">18696279110</div>
			</div>
		</div>
		<!--实付款-->
		<div class="actualpayment fix">
			<div class="actualpayment_name fl">实付款（含运费）</div>
			<div class="actualpayment_price fr">￥{{actualPayment}}</div>
		</div>
		<!--安全提醒-->
		<div class="remind">
			<div class="remind_title">安全提醒</div>
			<div class="remind_describe">付款成功后，搭搭秀不会以付款异常、卡单、系统升级为由联系您。请勿泄露银行卡号、手机验证码。否则会造成欠款损失、谨防电话诈骗！</div>
		</div>
    <div class="byYourself">
      <div class="pick">
        <!--提货码-->
        <div class="pickcode fix">
          <div class="pickcode_code"><span>提货码：</span>{{pickCode}}</div>
          <div class="pickcode_describe">付款成功！请勿泄露提货码~</div>
        </div>
        <!--实付款-->
        <div class="actualpayment fix">
          <div class="actualpayment_name fl">支付成功</div>
          <div class="actualpayment_price fr">￥{{actualPayment}}</div>
        </div>
        <!--提货方法-->
        <ul class="pickway">
          <li class="fix">
            <div class="pickway_name fl">预约时间:</div>
            <div class="pickway_cont fl">{{pickWayTime}}</div>
          </li>
          <li class="fix">
            <div class="pickway_name fl">门店名称:</div>
            <div class="pickway_cont fl">{{pickWayName}}</div>
          </li>
          <li class="fix">
            <div class="pickway_name fl">门店地址:</div>
            <div class="pickway_cont fl">{{pickWayAddress}}</div>
            <router-link to="/"><img class="pickway_map fr" src="../assets/image/ico_map@2x.png"></router-link>
          </li>
          <li class="fix">
            <div class="pickway_name fl">使用期限:</div>
            <div class="pickway_cont fl">{{pickWayTimes}}</div>
          </li>
          <li class="fix">
            <div class="pickway_name fl">门店电话:</div>
            <div class="pickway_cont fl">{{pickWayPhone}}</div>
            <a :href="'tel:'+pickWayPhone"><img class="pickway_phone fr" src="../assets/image/ico_phone@2x.png"></a>
          </li>
        </ul>
      </div>
      <!--使用说明-->
      <div class="use">
        <div class="use_title">使用说明</div>
        <div class="use_littletitle">① 提货地址及方式</div>
        <div class="use_describe">请您到下单时选择的门店提取所购买的商品，您可以在本卡卷页面查看到该地址，提货时请向导购员出示此提货码。</div>
        <div class="use_littletitle">② 提货时间</div>
        <div class="use_describe">未来保障门店的周转率，请您在该提货码的使用期限内完成提货，提货码过期后订单会自动退款给您 ，如果有任何问题，您可以先电话联系商家进行咨询。</div>
      </div>
    </div>
		<!--跳转-->
		<ul class="gotolist fix">
			<li class="gotoli fix">
				<router-link to="/">
					<img class="gotoimg fl" src="../assets/image/ico_indent@2x.png">
					<p class="gotop fl">查看订单</p>
				</router-link>
			</li>
			<li class="gotoli fix">
				<router-link to="/">
					<img class="gotoimg fl" src="../assets/image/ico_home@2x.png">
					<p class="gotop fl">返回首页</p>
				</router-link>
			</li>
		</ul>
		<!--热门-->
		<div class="home_hot">
			<img class="hot_title" src="../assets/image/title_img@2x.png">
			<div class="hot_main">
				<ul class="fix">
					<li>
						<router-link to="/"><img class="hot_img" src=""></router-link>
						<div class="hot_describe">
							<p class="hot_describe_p">{{hotGoodsName}}</p>
							<span class="hot_describe_span">￥ {{hotGoodsPrice}}</span>
							<img class="hot_describe_img" src="../assets/image/ico_shopping-car@2x.png">
						</div>
					</li>
					<li>
						<router-link to="/"><img class="hot_img" src=""></router-link>
						<div class="hot_describe">
							<p class="hot_describe_p">{{hotGoodsName}}</p>
							<span class="hot_describe_span">￥ {{hotGoodsPrice}}</span>
							<img class="hot_describe_img" src="../assets/image/ico_shopping-car@2x.png">
						</div>
					</li>
					<li>
						<router-link to="/"><img class="hot_img" src=""></router-link>
						<div class="hot_describe">
							<p class="hot_describe_p">{{hotGoodsName}}</p>
							<span class="hot_describe_span">￥ {{hotGoodsPrice}}</span>
							<img class="hot_describe_img" src="../assets/image/ico_shopping-car@2x.png">
						</div>
					</li>
					<li>
						<router-link to="/"><img class="hot_img" src=""></router-link>
						<div class="hot_describe">
							<p class="hot_describe_p">{{hotGoodsName}}</p>
							<span class="hot_describe_span">￥ {{hotGoodsPrice}}</span>
							<img class="hot_describe_img" src="../assets/image/ico_shopping-car@2x.png">
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue'

export default {
	name: 'app',
	data () {
		return {
			actualPayment:65.00,
			hotGoodsName:"ELLY 2017 新款 阔腿九分牛仔裤",
			hotGoodsPrice:298
		}
	},
	methods () {
	}
}
</script>
<style lang="scss">
.pay-succeed-main{
  .payfor_succeed{ width: 100%; height: 2rem; background: #ff365d; }
  .succeed_describe{
    float: left; padding: 0.66rem 0 0 0.74rem;
    .succeed_p{ height: 0.3rem; line-height: 0.3rem; font-size: 0.3rem; color: #fff; }
    .succeed_span{ display: block; padding-top: 0.2rem; height: 0.24rem; line-height: 0.24rem; font-size: 0.24rem; color: #fff; }
  }
  .succeed_img{ display: block; float: right; padding: 0.34rem 0.96rem 0 0; width: 2.33rem; height: 1.33rem; }
  .pickcode{ width: 100%; height: 2rem; background: #ff365d; }
  .pickcode_code{
    padding-top: 0.66rem; height: 0.4rem; line-height: 0.4rem; text-align: center; font-size: 0.4rem; color: #fff;
    span{ font-size: 0.24rem; color: #fff; }
  }
  .pickcode_describe{ padding-top: 0.2rem; height: 0.2rem; line-height: 0.2rem; text-align: center; font-size: 0.2rem; color: #fff; }
  .actualpayment{ padding: 0 0.3rem; height: 0.88rem; line-height: 0.88rem; background: #fff; border-bottom: 0.06rem solid #f4f5f5; }
  .actualpayment_name{ font-size: 0.24rem; color: #333; }
  .actualpayment_price{ font-size: 0.28rem; color: #ff365d; }
  .pickway{
    padding: 0 0.3rem; background: #fff;
    li{
      width: 100%;
      +li{ border-top: 1px solid #ddd; }
    }
  }
.pickway_name{ width: 1.36rem; height: 0.8rem; line-height: 0.8rem; font-size: 0.24rem; color: #353535; }
.pickway_cont{ padding: 0.18rem 0 0.14rem; width: 4.8rem; line-height: 0.46rem; font-size: 0.24rem; color: #333; }
.pickway_map{ display: block; margin-top: 0.48rem; width: 0.28rem; height: 0.28rem; }
.pickway_phone{ display: block; margin-top: 0.28rem; width: 0.28rem; height: 0.28rem; }
.use{ padding: 0.3rem; background: #fff; border-top: 0.2rem solid #f4f5f5; border-bottom: 0.06rem solid #f4f5f5; }
.use_title{ height: 0.24rem; line-height: 0.24rem; font-size: 0.24rem; color: #333; }
.use_littletitle{ padding-top: 0.26rem; line-height: 0.24rem; font-size: 0.24rem; color: #666; }
.use_describe{ padding-top: 0.16rem; line-height: 0.32rem; font-size: 0.24rem; color: #999; }
  .delivery_address{
    width: 100%; height: 1.6rem; background: #fff; border-bottom: 0.2rem solid #f4f5f5; position: relative;
    .address_icon{ display: block; float: left; padding: 0.61rem 0.18rem 0 0.3rem; width: 0.32rem; height: 0.32rem; }
    .default_address{
      padding-top: 0.26rem;
      p{ width: 4.54rem; line-height: 0.36rem; font-size: 0.24rem; color: #333; }
    }
    .default_phone{ height: 0.2rem; line-height: 0.2rem; font-size: 0.2rem; color: #333; position: absolute; right: 0.56rem; top: 0.33rem; }
  }
  .actualpayment{ padding: 0 0.3rem; height: 0.88rem; line-height: 0.88rem; background: #fff; border-bottom: 0.06rem solid #f4f5f5; }
  .actualpayment_name{ font-size: 0.24rem; color: #333; }
  .actualpayment_price{ font-size: 0.28rem; color: #ff365d; }
  .remind{ padding: 0.3rem; background: #fff; border-bottom: 0.06rem solid #f4f5f5; }
  .remind_title{ height: 0.24rem; line-height: 0.24rem; font-size: 0.24rem; color: #333; }
  .remind_describe{ padding-top: 0.16rem; line-height: 0.3rem; font-size: 0.22rem; color: #ff365d; }
  .gotolist{ height: 0.9rem; }
  .gotoli{
    float: left; width: calc(100%/2 - 1px);
    +.gotoli{ border-left: 2px solid #f4f5f5; }
  }
  .gotoimg{ display: block; padding: 0.32rem 0.24rem 0 1.16rem; width: 0.28rem; height: 0.28rem; }
  .gotop{ line-height: 0.9rem; font-size: 0.24rem; color: #333; }
  .home_hot{
    background: #f4f5f5;
    .hot_title{ display: block; margin: 0 auto; padding: 0.5rem 0 0.3rem; width: 2.25rem; height: 0.61rem; }
    .hot_main{
      padding: 0 0.3rem;
      li{ margin-bottom: 0.3rem; width: 3.3rem; height: 5.4rem; }
      li:nth-child(odd){ float: left; }
      li:nth-child(even){ float: right; }
      .hot_img{ display: block; width: 3.3rem; height: 3.3rem; }
      .hot_describe{ width: 3.3rem; height: 2.1rem; background: #fff; position: relative; }
      .hot_describe_p{ padding: 0.3rem 0.3rem 0; line-height: 0.42rem; font-size: 0.28rem; color: #3e3e3e; }
      .hot_describe_span{ display: block; height: 0.32rem; line-height: 0.32rem; font-size: 0.32rem; color: #ff365d; position: absolute; left: 0.3rem; bottom: 0.28rem; }
      .hot_describe_img{ display: block; width: 0.28rem; height: 0.28rem; position: absolute; right: 0.3rem; bottom: 0.3rem; }
    }
  }
}

</style>
